<template>
  <view class="home-essence-lecturer home-panel">
    <view class="panel-header">
      <text class="panel-header--title">精英讲师</text>
    </view>
    <view class="panel-content">
      <swiper
        class="lecturer--swiper"
        :indicator-dots="swiper.indicatorDots"
        :autoplay="swiper.autoplay"
        :interval="swiper.interval"
        :duration="swiper.duration"
        @change="swiper.current = $event.detail.current"
        indicator-active-color="#f54305"
        indicator-color="#d9d9d9"
        next-margin="50rpx"
        previous-margin="50rpx"
      >
        <swiper-item v-for="(item,$index) in list" :key="$index">
          <view class="swiper-item" :class="{'is-scale' : swiper.current !== $index}">
            <!-- <image class="swiper-item--image" :src="item.img_path" mode="widthFix" /> -->
            <view class="lecturer-container">
              <view class="lecturer-header">
                <view class="lecturer-avatar">
                  <image
                    class="lecturer-avatar--image"
                    :src="item.showPic"
                    :alt="item.realName"
                    v-lazy="item.showPic"
                  />
                </view>
                <view class="lecturer-desc">
                  <view class="lecturer-name">{{ item.realName }}</view>
                  <view class="lecturer-expertise van-ellipsis">
                    <text>擅长领域：</text>
                    <text>{{ item.expertiseField }}</text>
                  </view>
                </view>
              </view>
              <view class="lecturer-main van-multi-ellipsis--l3">{{ item.intro }}</view>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
import { selectEssenceLecturerbyPageAPI } from "api/order/lecturer.js";
export default {
  name: "homeEssenceLecturer",
  components: {},
  data() {
    return {
      page: {
        currentPage: 1,
        pageNumber: 10,
        totalNumber: 0,
        totalPage: 1
      },
      swiper: {
        indicatorDots: false,
        autoplay: true,
        interval: 100000,
        duration: 500,
        current: 0
      },
      list: []
    };
  },
  created() {
    this.loadEssenceLecturerList();
  },
  mounted() {},
  methods: {
    handleClickGotoLession() {
      this.$router.push(`/lession`);
    },

    // 加载推荐的课程
    loadEssenceLecturerList() {
      var params = {
        ...this.page
      };
      var self = this;
      selectEssenceLecturerbyPageAPI(params).then(
        ({ respCode, respMsg, result }) => {
          if (respCode !== "0") {
            // 加载失败
            this.isloading = false;
            this.$toast.fail(respMsg);
            return;
          }
          self.list = result.list.slice(0, 10);
          this.page.totalPage = result.page.totalPage;
        }
      );
    }
  }
};
</script>

<style scoped lang="scss">
.home-essence-lecturer {
  background-color: $fill-body !important;
  .panel-content {
    padding: 32rpx 0 28rpx;
  }
  .lecturer--swiper {
    height: 365rpx;
  }
  .swiper-item {
    display: inline-block;
    height: 365rpx;
    width: 650rpx;
    text-align: center;
    padding: 0 20rpx;
    &.is-scale {
      transform: scale(0.95);
      width: 384rpx;
    }
  }

  .swipe-indicator {
    position: absolute;
  }
}

.lecturer-container {
  width: 610rpx;
  height: 356rpx;
  background-color: #ffffff;
  border-radius: 10rpx;
  padding: 23rpx 30rpx 40rpx;
  box-sizing: border-box;
  overflow: hidden;
  font-size: 0;
  text-align: left;
  .lecturer-header {
    display: flex;
    flex-direction: row;
    margin-bottom: 26rpx;
    .lecturer-avatar {
      flex: 0 0 80rpx;
      .lecturer-avatar--image {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
      }
    }
    .lecturer-desc {
      flex: 1;
      padding: 0 20rpx;
      box-sizing: border-box;
      width: 0;
      .lecturer-name {
        font-size: 30rpx;
        font-weight: bold;
        font-stretch: normal;
        letter-spacing: 0rpx;
        color: #2c2c35;
      }
      .lecturer-expertise {
        font-size: 26rpx;
        font-weight: normal;
        font-stretch: normal;
        line-height: 40rpx;
        letter-spacing: 0rpx;
        color: #aeafc0;
        margin-top: 4rpx;
      }
    }
  }
  .lecturer-main {
    font-size: 26rpx;
    font-weight: normal;
    font-stretch: normal;
    line-height: 40rpx;
    letter-spacing: 0rpx;
    color: #aeafc0;
    -webkit-line-clamp: 5;
  }
}
</style>
